import { useModalStore, type ModalOptions } from '@/store/modules/modal.js'
import { watch, type Component } from 'vue'
import ConfirmModal from '@/modal/components/ConfirmModal.vue' // 1. 引入 ConfirmModal 组件

// 2. 为 confirm 方法的 props 定义一个清晰的接口
interface ConfirmModalProps {
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
}

export function useModal() {
  const modalStore = useModalStore()

  // --- 底层 API (保持不变) ---
  const show = (component: Component, props?: Record<string, any>, options?: ModalOptions) => {
    return modalStore.show(component, props, options)
  }

  const hide = (id: string) => {
    modalStore.hide(id)
  }

  const hideAll = () => {
    modalStore.hideAll()
  }

  // --- 3. 新增的上层封装 API ---
  /**
   * 显示一个确认对话框，并返回一个 Promise。
   * 用户点击确认，Promise resolve；点击取消或关闭，Promise reject。
   * @param props 对话框内容 { title, message, ... }
   * @param options 模态框样式 { position, animationType, ... }
   * @returns Promise<true>
   */
  const confirm = (props: ConfirmModalProps, options?: ModalOptions): Promise<true> => {
    return new Promise((resolve, reject) => {
      let modalId: string | null = null;

      // 定义确认和取消时的行为
      const handleConfirm = () => {
        if (modalId) hide(modalId); // 使用封装好的 hide 方法
        resolve(true);
        stopWatcher(); // 清理监听
      };

      const handleCancel = () => {
        if (modalId) hide(modalId); // 使用封装好的 hide 方法
        reject(false);
        stopWatcher(); // 清理监听
      };

      // 使用底层的 show 方法来显示模态框
      modalId = show(
        ConfirmModal,
        {
          ...props,
          onConfirm: handleConfirm, // 注入回调
          onCancel: handleCancel,   // 注入回调
        },
        { ...options, closeOnClickOverlay: options?.closeOnClickOverlay ?? true }
      );

      // 监听模态框是否被意外关闭 (如点击遮罩层、按ESC)
      const stopWatcher = watch(
        () => modalStore.modals,
        (modals) => {
          if (modalId && !modals.some(m => m.id === modalId)) {
            reject(false);
            stopWatcher(); // 清理监听
          }
        },
        { deep: true }
      );
    });
  };

  // --- 4. 返回所有方法 ---
  return {
    // 底层方法
    show,
    hide,
    hideAll,
    // 上层封装方法
    confirm,
  }
}
